
*{
  box-sizing: border-box;
}
.container{
  width: 100%;
  height: 100%;
  overflow: hidden;
background: #010F1A;
}

.container .header,.container .header *,.container .title,.container .title *,.container .body,.container .body *{
  box-sizing:border-box;
  position: relative;
}

.bgcolor{
  background: #f8f8f8;
}

.infoBox{
  width: 100%;
  height: 11%;
max-height:15%;
  padding: .5rem 0rem;
}
.infoBox>div{
  display: inline-block;
  float: left;
  width: 100%;
  height: 100%;
}
.infoBox>div:first-child{
  padding-left: .5rem;
}
.infoBox>div:first-child>div:nth-child(1){
  padding-top: 3.2%;
  width: 100%;
  font-size: 1.3rem;
  font-weight: 600;
  color:green
}
.infoBox>div:first-child>div:nth-child(2){

  width: 100%;
  font-size: .75rem;
}
.infoBox>div:nth-child(2)>div{
  font-size: .75rem;
  width: 100%;
  padding-top: 8%;
}
.infoBox>div:nth-child(3)>div{

  font-size: .75rem;
  width: 100%;
  padding-top: 6.3%;
}

.chartBox{
  width: 100%;
  height: 60%;
  position: relative;
}
.chartBox>div:first-child{
  width: 100%;
  padding: 0rem .1rem;
  height: 12%;
  position: relative;
  margin-bottom: .1rem;
}
.chartBox>div:first-child>div{
  position: relative;
  height: 100%;
  padding-top: .7rem;
  border:0.5px solid rgba(93,100,106,0.5);
  width: 25%;
  float: left;
  text-align: center;
}
.chartBox>div:first-child>div:nth-child(1),.chartBox>div:first-child>div:nth-child(2),.chartBox>div:first-child>div:nth-child(3){
  border-right: none;
}

.chartBox>div:first-child>div>span{
  display: inline-block;
  padding-bottom: .3rem;
  width: 60%;
}
.chartBox>div:first-child>div>span.active{
  border-bottom:3px solid #00a400;
  color: #00a400;
}

#chartDiv{
  height: 85%;
  width: 100%;
}

.coinInfo{
  padding: 1rem .5rem;
  background: #27323B;

}

.coinInfo>div{
  width: 50%;
  height: 50%;
  vertical-align: middle;
  color:#ebebeb;
  float: left;
  border:0.5px #6e6e6e solid;
  color:#fff
}

.coinInfo>div:first-child{
  border-bottom:none;
  border-right:none
}
.coinInfo>div:nth-child(2){
  border-bottom:none;
}
.coinInfo>div:nth-child(3){
  border-right:none
}

.coinInfo>div>div{
  float: left;
padding:10% .5rem 0rem .5rem;

  font-size: .85rem;
}


.coinInfo>div>div:first-child{

  color:#ebebeb;
  width: 43%;
  /*padding-right: .5rem;*/
}
.coinInfo>div>div:last-child{
  text-align: right;
  width: 57%;
  color: #ebebeb
  /*padding-right: .5rem;*/
}
